<template>
  <div class="list-bar">
     <h1>评论回复</h1>
      <p v-show="comments.length === 0">暂无评论</p>
      <ul class="list-cont">
        <Item 
        v-for="(comment, index) in comments" 
        :key="index" 
        :deleteComment="deleteComment"
        :comment="comment"
        :index="index"/>
      </ul>
  </div>
</template>

<script>
import Item from './Item.vue';
export default {
  // 声明接收属性：这个属性就会成为组件对象的属性
  props: ['comments', 'deleteComment'],
  components: {
    Item
  }
}
</script>

<style lang="scss">
  .list-bar{
    display: inline-block;
    vertical-align: top;
  }
</style>